<template lang="html">
  <div class="container" v-loading="loading">
      <div class="order_status">
          <div class="p">
            <span v-if="orderAllData.receiveType == 1">当前订单状态：待审核</span>
            <span v-if="orderAllData.receiveType == 2">当前订单状态：待返厂</span>
            <span v-if="orderAllData.receiveType == 3">当前订单状态：返厂物流中</span>
            <span v-if="orderAllData.receiveType == 4">当前订单状态：待验收</span>
            <span v-if="orderAllData.receiveType == 5">当前订单状态：待发货</span>
            <span v-if="orderAllData.receiveType == 6">当前订单状态：发货物流中</span>
            <span v-if="orderAllData.receiveType == 7">当前订单状态：待合验</span>
            <span v-if="orderAllData.receiveType == 8">当前订单状态：已完成</span>
              <el-popover placement="right" width="400" trigger="click">
                <el-timeline>
                    <el-timeline-item v-for="item in orderAllData.orderRecords" :key="item.id" :timestamp="item.recordTime | dateTime" color="#F3B562" placement="top">{{item.recordContent}}</el-timeline-item>
                </el-timeline>
                  <el-button type="text" class="el_button" slot="reference">查看记录<i class="el-icon-arrow-right"></i></el-button>
              </el-popover>
          </div>
          <div class="p" v-if="orderAllData.type == 1">测量师已提交订单，请查看详情后对订单进行审核</div>
          <div class="p" v-if="orderAllData.type == 2">订单审核成功，等待管理员派厂</div>
          <div class="p" v-if="orderAllData.type == 3">订单未结款，请实时关注到款情况</div>
          <div class="p" v-if="orderAllData.type == 4">订单派厂成功</div>
      </div>

      <div class="table_content">
          <el-tabs type="border-card">
              <el-tab-pane label="订单信息">
                  <div class="tab_pane_1">
                      <div class="client_info">
                          <p style="font-weight:600">客户信息</p>
                          <ul>
                            <li>
                                <p>姓名：{{orderAllData.userName}}</p>
                                <p>编号：{{orderAllData.mbId}}</p>
                                <p>手机号：{{orderAllData.phone}}</p>
                                <p v-if="orderAllData.shippingMethod == 1">配送方式：快递配送</p>
                                <p v-if="orderAllData.shippingMethod == 2">配送方式：店铺自取</p>
                            </li>
                            <li>
                                <p>店铺：{{orderAllData.branchStoreName}}</p>
                                <p v-if="orderAllData.type==1">身份：客户</p>
                                <p v-if="orderAllData.type==2">身份：员工</p>
                                <p>地址：{{orderAllData.cityDetail}}</p>
                            </li>
                          </ul>
                      </div>
                      <div class="order_info">
                        <p style="font-weight:600">订单信息</p>
                        <ul>
                          <li>
                              <p>订单编号：{{orderAllData.orderSublistId}}</p>
                              <p>创建时间：{{orderAllData.createTime | dateTime}}</p>
                              <p>设计师：{{orderAllData.designerName}}  {{orderAllData.designerPhone}}  </p>
                          </li>
                        </ul>
                        <div class="goods_table">
                            <el-table :data="[orderAllData]" style="font-size:14px" :header-cell-style="{color:'#333',background:'#E8E8E8'}" border>
                              <el-table-column align="center" prop="picUrl" label="产品图片">
                                <template slot-scope="scope">
                                  <p class="table_image"> <img :src="scope.row.picUrl" alt=""> </p>
                                </template>
                              </el-table-column>
                              <el-table-column align="center" prop="commodityName" label="名称"></el-table-column>
                              <el-table-column align="center" prop="color" label="颜色"></el-table-column>
                              <el-table-column align="center" prop="laceName" label="蕾丝"></el-table-column>
                              <el-table-column align="center" prop="size" label="尺寸"></el-table-column>
                              <el-table-column align="center" prop="commodityNum" label="数量"></el-table-column>
                              <el-table-column align="center" prop="nameSign" label="姓名签"></el-table-column>
                              <el-table-column align="center" prop="commodityPrice" label="销售金额"></el-table-column>
                              <el-table-column align="center" prop="realPrice" label="结算金额"></el-table-column>
                              <el-table-column align="center" prop="prepaidBalance" label="预付款"></el-table-column>
                            </el-table>
                        </div>
                      </div>
                  </div>
              </el-tab-pane>
              <el-tab-pane label="定制需求">
                  <div class="tab_pane_2">
                      <ul>
                          <li v-for="item in orderAllData.customDetails" :key="item.id">
                              <p>{{item.customName}}</p>
                              <p>{{item.customDetailName}}</p>
                          </li>
                      </ul>
                  </div>
              </el-tab-pane>
              <el-tab-pane label="加购项目">
                <div class="tab_pane_2">
                    <ul>
                        <li v-for="item in orderAllData.additionDetails" :key="item.id">
                            <p>{{item.additionalName}}</p>
                            <p>{{item.additionalDetailName}}</p>
                        </li>
                    </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="量体数据">
                  <div class="tab_pane_3">
                      <div class="table_1">
                          <p>量体数据</p>
                          <div class="tab_pane_3_table">
                            <div style="width:49%">
                              <el-table :data="tableData2" style="font-size:14px" :header-cell-style="{color:'#333',background:'#E8E8E8'}" border>
                                <el-table-column align="center" prop="positionName" label="量体部位"></el-table-column>
                                <el-table-column align="center" label="参考范围">
                                  <template slot-scope="scope">
                                    <p>{{scope.row.minReference}}~{{scope.row.maxReference}}</p>
                                  </template>
                                </el-table-column>
                                <el-table-column align="center" prop="positionValue" label="尺寸"></el-table-column>
                              </el-table>
                            </div>
                            <div style="width:49%">
                              <el-table :data="tableData3" style="font-size:14px" :header-cell-style="{color:'#333',background:'#E8E8E8'}" border>
                                <el-table-column align="center" prop="positionName" label="量体部位"></el-table-column>
                                <el-table-column align="center" label="参考范围">
                                  <template slot-scope="scope">
                                    <p>{{scope.row.minReference}}~{{scope.row.maxReference}}</p>
                                  </template>
                                </el-table-column>
                                <el-table-column align="center" prop="positionValue" label="尺寸"></el-table-column>
                              </el-table>
                            </div>
                          </div>
                      </div>

                  </div>
              </el-tab-pane>
          </el-tabs>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      type: null,
      id:null,
      orderAllData:{},
      tableData: [],
      tableData2: [],
      tableData3: [],
    }
  },
  filters:{
    dateTime: function (value) {
      if(!value) return '';
      let oDate = new Date(value);
      let h = oDate.getHours()<10?'0'+oDate.getHours():oDate.getHours();
      let m = oDate.getMinutes()<10?'0'+oDate.getMinutes():oDate.getMinutes();
      let s = oDate.getSeconds()<10?'0'+oDate.getSeconds():oDate.getSeconds();
      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+h+':'+m+':'+s;
    }
  },
  created(){
    this.type = this.$route.query.type;
    this.id = this.$route.query.id;
    this.loadViewData();
  },
  methods:{
    async loadViewData(){
      this.loading = true;
      let res = null;
      switch(this.type){
        case '1':
          res = await this.$http.selectDataStatsOrder({orderSublistId: this.id});
        break;
        case '2':
          res = await this.$http.selectDataStatsPayMemberDetail({orderSublistId: this.id});
        break;
        case '3':
          res = await this.$http.selectDataStatsHyDetail({orderSublistId: this.id});
        break;
      }
      this.loading = false;
      if(res.data.code == 0){
        this.tableData2 = []; this.tableData3 = [];
        this.orderAllData = res.data.data;
        if(this.orderAllData.orderPositions.length >= 2){
          this.orderAllData.orderPositions.forEach((item,i)=>{
            if(i>=(this.orderAllData.orderPositions.length/2)){
              this.tableData3.push(item);
            }else{
              this.tableData2.push(item);
            }
          });
        }else{
          this.tableData2 = this.orderAllData.orderPositions;
        }
        // this.orderAllData.afterSalaRecords.reverse();
      }
    },



  }
}
</script>

<style lang="css" scoped>
.order_status{
  width: 100%;
  border: 1px solid #ff9900;
  background: #fff7eb;
  padding: 40px 0 40px 40px;
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
  margin-bottom: 40px
}
.order_status .p{
  line-height: 30px;
  font-size: 14px;
  color: #666666;
}
.order_status .p span{
  font-size: 15px;
  color: #333333;
}
.el_button{
  font-size: 14px;
  margin-left: 30px
}
.tab_pane_1 p{
  font-size: 14px;
  color: #333333;
}
.tab_pane_1 ul{
  width: 100%;
  overflow: hidden;
  padding-bottom: 15px
}
.tab_pane_1 li{
  line-height: 32px;
  display: flex;
  justify-content: flex-start;
  width:100%;
}
.tab_pane_1 li>p{
  width: 25%;
  white-space: nowrap;
}
.client_info p,.order_info p{
  line-height: 36px;
}
.client_info,.order_info{
  padding-top: 15px;
  border-top: 1px solid #E8E8E8;
}
.tab_pane_2 ul,.tab_pane_3 ul{
  border: 1px solid #E8E8E8;
}
.tab_pane_2 li,.tab_pane_3 li{
  display: flex;
  height: 72px;
  line-height: 72px;
  font-size: 14px;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}
.tab_pane_2 li p,.tab_pane_3 li p{
  text-align: center;
  width: 120px;
  box-sizing: border-box;
  border-right: 1px solid #E8E8E8;
  background: #E8E8E8;
}
.tab_pane_2 li p:nth-child(2),.tab_pane_3 li p:nth-child(2){
  width: calc(100%  - 120px);
  text-align: left;
  padding-left: 50px;
  box-sizing: border-box;
  border-bottom: 1px solid #E8E8E8;
  border-right: none;
  background: #fff;
}
.tab_pane_2 li:last-child>p,.tab_pane_3 li:last-child>p{
  border-bottom: none;
}
.tab_pane_3_table{
  display: flex;
  justify-content: space-between;
}
.table_1{
  margin-bottom: 15px;
}
.table_1 p,.table_2>p{
  padding: 20px 0;
}
.table_image{
  width:90px;
}
.table_image img{
  display: block;
  width: 100%;
}
</style>
